<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      // 使用函数可以定义一个组件
      function Wellcom(props) {
        return <h1>Hello, world, {props.name}</h1>;
      }
      // 使用类定义一个组件
      class Wellcom2 extends React.Component {
        render() {
          return <h1>Hello, {this.props.name}</h1>;
        }
      }
      const element = <Wellcom name='sara'/>
      // ReactDOM.render(
      //   element,
      //   document.getElementById('root')
      // );
      // 组件必须以大写字母开头

      // 组件组合
      function App() {
        return (
          <div>
            <Wellcom2 name='小明' />
            <Wellcom2 name='狗子' />
            <Wellcom2 name='二蛋' />
          </div>
        );
      }
      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );


      // 提取组件
      // function Comment(props) {
      //   return (
      //     <div className='Comment'>
      //       <div className='UserInfo'>
      //         <img className='Avatar'
      //           src={props.author.avatarUrl}
      //           alt={props.author.name}
      //         />
      //         <div className='UserInfo-name'>
      //           {props.author.name}
      //         </div>
      //       </div>
      //       <div className='Comment-text'>
      //         {props.text}
      //       </div>
      //       <div className='Comment-date'>
      //         {formatDate(props.date)}
      //       </div>
      //     </div>
      //   );
      // }
      function Avatar(props) {
        return (
          <img className="Avatar"
            src={props.user.avatarUrl}
            alt={props.user.name}
          />

        );
      }
      function Comment(props) {
        return (
          <div className="Comment">
            <div className="UserInfo">
              <Avatar user={props.author} />
              <div className="UserInfo-name">
                {props.author.name}
              </div>
            </div>
            <div className="Comment-text">
              {props.text}
            </div>
            <div className="Comment-date">
              {formatDate(props.date)}
            </div>
          </div>
        );
      }

      // 所有的React组件必须像纯函数那样使用它们的props。
    </script>
  </body>
</html>
